<template>
        <div>
          <el-card>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                >导出</el-button>
              </el-col>
              <el-col :span="6" :offset="15">
                <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
              >
                <el-button
                  style="padding-right:10px"
                  slot="suffix"
                  type="text"
                >搜索
                </el-button
                >
              </el-input>
              </el-col>
            </el-row>

            <el-table :data="informList" v-loading="loading" style="margin-top: 10px" height="498px">
              <el-table-column label="用户ID" align="center" prop="uid" class="el-table-column-font"/>
              <el-table-column label="用户昵称" align="center" prop="nickname" />
              <el-table-column label="角色" align="center" prop="role" />
              <el-table-column label="登陆时间" align="center" prop="loginDate" />
              <el-table-column label="创建时间" align="center" prop="gmtCreated"/>
              <el-table-column label="用户状态" align="center" prop="status"/>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="goToPost(scope.row)"
                  >详细信息</el-button>
                  <el-popover
                    placement="right"
                    width="130"
                    v-if="scope.row.status === '未被锁定'"
                    >
                    <a style="line-height:50px">确定冻结用户吗?</a>
                    <el-row :gutter="20">
                      <el-col :span="10"><el-button type="danger" size="small" @click="close" round>不是</el-button></el-col>
                      <el-col :span="1"><el-button type="primary" size="small" @click="userFreeze(scope.row)" round>是的</el-button></el-col>
                    </el-row>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-thumb"
                      slot="reference"
                      v-if="scope.row.role !== '管理员'"
                    >锁定用户</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-thumb"
                      slot="reference"
                      v-else
                      disabled
                    >锁定用户</el-button>
                  </el-popover>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-thumb"
                    slot="reference"
                    v-else
                    @click="unFreeze(scope.row)"
                  >解锁</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="this.queryParams.total"
              :page-size="this.queryParams.pageSize"
              :current-page="this.queryParams.pageNum"
              @current-change="getRecords"
              style="margin-top: 50px;line-height: normal"
            >
            </el-pagination>
          </el-card>
        </div>
</template>

<script>
import Header from '../../../components/header.vue'
import Aside from '../../../components/aside.vue'
export default {
  name: 'index',
  mounted () {
    this.getRecords(1)
  },
  components: {
    // eslint-disable-next-line no-unused-expressions
    Header,
    Aside
  },
  data () {
    return {
      visible1: false,
      loading: false,
      total: 10,
      informList: [],
      title: '',
      queryParams: {
        pageNum: 1,
        pageSize: 7,
        postCode: undefined,
        postName: undefined,
        status: undefined,
        total: 1,
        currentPage: 1
      }
    }
  },
  methods: {
    getRecords (val) {
      this.queryParams.pageNum = val
      this.$axios.get('/user/admin/queryAll?currentPage=' + this.queryParams.pageNum).then(res => {
        this.informList = res.data.data
        this.queryParams.total = res.data.total
        console.log(this.informList)
      })
    },
    testScope (row, handle) {
      document.body.click()
      this.$axios.post('/handleInform?handle=' + handle + '&uid=' + this.$store.getters.getUser.UID, row).then(res => {
        this.$message({
          message: '举报处理成功',
          type: 'success'
        })
        this.getRecords(this.queryParams.pageNum)
      })
    },
    userFreeze (row) {
      this.close()
      this.$axios.get('/user/freeze?uid=' + row.uid).then(res => {
        this.getRecords(this.queryParams.pageNum)
        this.$message({
          message: '冻结成功',
          type: 'success'
        })
      })
    },
    unFreeze (row) {
      this.$axios.get('/user/unfreeze?uid=' + row.uid).then(res => {
        this.getRecords(this.queryParams.pageNum)
        this.$message({
          message: '取消冻结成功',
          type: 'success'
        })
      })
    },
    goToPost (row) {
      console.log(row.pcId)
      this.$router.push({
        name: 'postBody',
        query: {
          pid: row.pcId
        }
      })
    },
    deleteI (row) {
      console.log(row)
      this.$axios.post('/testDelete', row).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    close () {
      document.body.click()
    }
  }
}

</script>
<style>
html, body, #app, .el-container {
  padding: 0;
  margin: 0;
  height: 100%;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545C64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 70px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-table-column-font{
  font-size: xx-large;
}
</style>
